<template>
  <base-chart :options="options" :height="height" />
</template>

<script setup>
import { computed } from 'vue'
import BaseChart from '@/base-ui/echart/base-chart.vue'

const props = defineProps({
  height: {
    type: String,
    default: '100%'
  },
  title: {
    type: String,
    default: ''
  },
  xLabels: {
    type: Array,
    default: () => []
  },
  yValues: {
    type: Array,
    default: () => []
  }
})

const options = computed(() => {
  return {
    title: {
      text: '',
      left: 'center',
      textStyle: {
        fontWeight: 400,
        fontSize: 16
      }
    },
    grid: {
      left: '15',
      right: '100',
      top: '60',
      bottom: '15',
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      }
    },
    legend: {
      show: true,
      top: 30
    },
    xAxis: {
      name: '水位（m）',
      nameTextStyle: {
        color: '#333'
      },
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#666'
        }
      },
      axisLabel: {
        show: true,
        color: '#666'
      },
      boundaryGap: false,
      data: props.xLabels
    },
    yAxis: {
      name: '库容（万m³）',
      nameTextStyle: {
        color: '#333'
      },
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#ebeef5'
        }
      },
      axisLabel: {
        show: true,
        color: '#666'
      }
    },
    series: [
      {
        data: props.yValues,
        type: 'line',
        smooth: true
      }
    ]
  }
})
</script>
